<template>
  <!-- 登录页面 -->
  <div class="header">
    <div class="headertitle">
      <a
        :class="islogin == false ? { mybottom: true } : {}"
        @click="islogin = false"
        href="#"
        >短信验证</a
      >
      <div>|</div>
      <a
        :class="islogin == true ? { mybottom: true } : {}"
        @click="islogin = true"
        href="#"
        >账号登录</a
      >
    </div>
    <!-- 短信验证 -->
    <div v-show="!islogin">
      <div>
        <input
          v-model="phonenumber"
          class="tellnumber"
          type="text"
          placeholder="手机号"
        />
        <div v-show="isphonenumberwrong" class="format">手机号格式不正确</div>
        <div v-show="isphonenumbernull" class="format">手机号不能为空</div>
      </div>
      <div class="smalltell">
        <input v-model="verification" type="text" placeholder="短信验证码" />
        <button>获取验证码</button>
      </div>
      <div v-show="verificationwrong" class="format">验证输入有误</div>
    </div>
    <!-- 账号登录 -->
    <div v-show="islogin">
      <div>
        <input
          v-model="account"
          class="tellnumber"
          type="text"
          placeholder="用户名"
        />
      </div>
      <div>
        <input
          v-model="password"
          class="tellnumber2"
          type="text"
          placeholder="密码"
        />
        <div v-show="accountwrong" class="format">账号或者密码输入有误</div>
      </div>
    </div>
    <!-- 登录按钮 -->
    <div class="loginbtn">
      <button @click="Login">登录</button>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div @click="GoRegister">快速注册</div>
      <div>找回密码</div>
    </div>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import {useStore} from 'vuex'
export default {
  setup(props, { emit }) {
    props;
    // 登录方式
    const islogin = ref(false);
    const store=useStore()
    // 手机号，短信验证码，账号，面密码
    const phonenumber = ref("");
    const verification = ref("");
    const account = ref("");
    const password = ref("");
    // 验证显示
    const isphonenumbernull = ref(false);
    const isphonenumberwrong = ref(false);
    const verificationwrong = ref(false);
    const accountwrong = ref(false);
    // 跳转到注册页面
    const GoRegister = () => {
      emit("callRegister");
    };
    // 登录
    const Login = () => {
        isphonenumbernull.value=false
        isphonenumbernull.value=false
        verificationwrong.value=false
        accountwrong.value=false
      if (islogin.value == false) {
        // 验证手机号码是否为空
        if (phonenumber.value == "") {
          isphonenumberwrong.value = false;
          isphonenumbernull.value = true;
        } else {
          // 验证手机号格式
          // 设置正则表达式的手机号码格式1第一位数是必为1 第二位数可取3-9的数字 匹配9位数字
          isphonenumbernull.value = false;
          var reg = /^1[3-9]\d{9}$/;
          if (reg.test(phonenumber.value)) {
            isphonenumberwrong.value = false;
          } else {
            isphonenumberwrong.value = true;
          }
        }
        //   验证验证码
        verificationwrong.value = false;
        if (verification.value == "") {
          verificationwrong.value = true;
        }
      } else if (islogin.value == true) {
        //账号验证
        accountwrong.value = false;
        if(password.value==window.localStorage.getItem(account.value)) {
          emit('Loginright')
          alert('欢迎登录!')
        }else{
          accountwrong.value = true;
        }
      }
      store.commit('Adduser',{account:account.value,password:password.value})
    };
    return {
      islogin,
      verification,
      phonenumber,
      account,
      password,
      isphonenumbernull,
      isphonenumberwrong,
      verificationwrong,
      accountwrong,
      GoRegister,
      Login,
    };
  },
};
</script>

<style scoped>
.mybottom {
  border-bottom: 1px #888888 solid;
}
.header {
  z-index: 999;
  width: 368px;
  height: 337px;
  background: rgb(255, 255, 255);
  position: fixed;
  border: 1px #e2e0e0 solid;
  border-radius: 13px;
  top: 20%;
  left: 40%;
}
.headertitle {
  display: flex;
  font-size: 21px;
  font-weight: 100;
  justify-content: space-evenly;
  margin-top: 40px;
}
.headertitle > a {
  color: black;
  text-decoration: none;
}
/* 手机号 */
.tellnumber {
  margin-top: 20px;
  margin-left: 30px;
  width: 290px;
  height: 42px;
  font-size: 14px;
  border: 1px #888888 solid;
  padding-left: 10px;
  outline: none;
}
/* 短信验证码 */
.smalltell {
  display: flex;
  margin-left: 30px;
  margin-top: 20px;
}
.smalltell > :nth-child(1) {
  height: 39px;
  width: 200px;
  padding-left: 10px;
  outline: none;
}
.smalltell > :nth-child(2) {
  width: 89px;
  height: 43px;
  background: white;
  border: 1px #888888 solid;
  margin-left: -1px;
  cursor: pointer;
}
/* 账号 */
.tellnumber2 {
  margin-top: 20px;
  margin-left: 30px;
  width: 290px;
  height: 41px;
  font-size: 14px;
  border: 1px #888888 solid;
  padding-left: 10px;
  outline: none;
}
/* 登录 */
.loginbtn > :nth-child(1) {
  margin-top: 20px;
  margin-left: 30px;
  width: 302px;
  height: 42px;
  font-size: 14px;
  border: 1px #333333 solid;
  background: #333333;
  color: white;
  font-size: 18px;
  cursor: pointer;
}
/* 底部 */
.footer {
  display: flex;
  justify-content: space-between;
  width: 302px;
  margin-left: 28px;
  margin-top: 15px;
  font-size: 14px;
}
.footer > div {
  cursor: pointer;
}

.format {
  font-size: 12px;
  color: #f36903;
  position: fixed;
  margin-left: 30px;
}
</style>